<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSTL标签库是一个JSP标签的集合，封装了许多jsp应用程序通用的核心功能-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- JSTL格式化标签 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.6.13/layui/css/layui.css"/>
		<script src="${pageContext.request.contextPath}/js/jquery.min-2.1.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui-v2.6.13/layui/layui.js"></script>
		<style type="text/css">
			.layui-row{
				margin-bottom: 30px;
			}
			.layui-form{
				margin-left: 20px;
				margin-top: 20px;
			}
			#d1{
				margin-left: 20px;
				margin-top: 20px;
			}
		</style>
</head>
<body>
		<!-- action属性指定form表单的映射路径 -->
		<form class="layui-form" action="s">
			<input type="hidden" name="m" class="layui-input" value="selectAllStudent">
			<div class="layui-row">
				<!-- layui-input-block：是一个表单元素占一行，竖着，以例表的形式排列。
					layui-input-inline：多个表单控件占一行，横着，一行可以放置多个表单元素。 -->
			   <div class="layui-input-inline">
				 <input name="sName" placeholder="请输入查询学生的姓名"  class="layui-input" value="${sName}">
			   </div>
			   <div class="layui-input-inline">

				<select name="sGrade">
				  
				 <c:if test="${grade == null}">
                    <option value="">年级</option>
               	 </c:if> 
				  
				 <c:if test="${grade != null}">
				    
                    <option value="${grade}">${grade}</option>
                    <option value="">年级</option>
               	 </c:if>

				  <c:forEach items="${allGrades}" var="sGrade">
				  	 <c:if test="${grade != sGrade}"> 
                    	<option value="${sGrade}">${sGrade}</option>
               	 	 </c:if> 
				  </c:forEach>
				</select>
			
				
			  </div>
			  <div class="layui-input-inline">
				<select name="cId" lay-filter="f1">
				 <option value="">学院</option>
				  <c:forEach items="${allColleges}" var="college">
				  	<option <c:if test="${cId == college.id}"> selected=true </c:if> value="${college.id}">${college.cName}</option>
				  </c:forEach>
				</select>
			  </div>
			  <div class="layui-input-inline">
				<select id="major" name="mId">
				   <c:forEach items="${allMajors}" var="major">
				    <c:if test="${cId == major.cId}">
				     <option <c:if test="${mId == major.id}"> selected=true </c:if> value="${major.id}">${major.mName}</option>
				    </c:if>
				   </c:forEach>
				  <!-- <option value="">专业</option> -->
				</select>
			  </div> 
				<!-- layui-btn 把标签作为按钮
					layui-btn-sm 小型按钮 -->
				<button class="layui-btn">查询</button>
			  </div>
			
		</form>
		<div id="d1">
				<button class="layui-btn" type="button" onclick="add()">添加</button>
				<button class="layui-btn" onclick="downloadExcel()">导出表格</button>
				<!-- <table class="layui-table" lay-even lay-skin="nob">
						无边框表格（内部结构参见右侧目录“常规用法”）
					</table> -->
				<table class="layui-table">
					<!-- colgroup中可以使用col来定义表格单元格宽度， -->
					<colgroup>
					  <col width="100">
					  <col width="100">
					  <col width="100">
					  <col width="200">
					  <col width="200">
					  <col width="100">
					  <col width="200">
					  <col width="100">
					  <col width="200">
					  <col width="100">
					  <col width="100">
					  <col>
					</colgroup>
					<thead>
					  <tr>
						<th>姓名</th>
						<th>性别</th>
						<th>年级</th>
						<th>学院</th>
						<th>专业</th>
						<th>班级</th>
						<th>就业单位</th>
						<th>就业城市</th>
						<th>岗位名称</th>
						<th>薪资</th>
						<th>企业类型</th>
						<th>操作</th>
					  </tr> 
					</thead>
					<tbody>
 						<c:forEach items="${list}" var="str">
 						  <tr>
							<td>${str.sName}</td>
							<td>${str.sex}</td>
							<td>${str.sGrade}</td>
							<td>${str.cName}</td>
							<td>${str.mName}</td>
							<td>${str.clazz}</td>
							<td>${str.empCompany}</td>
							<td>${str.empCity}</td>
							<td>${str.empStation}</td>
							<td>${str.salary}</td>
							<td>${str.comtype}</td>
							<td><button class="layui-btn" onclick="update('${str.id}')">更新</button></td>
				   		  </tr>
						</c:forEach>
					</tbody>
				</table>
				<div id = "limitPage" style="text-align: center;">
				  <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="queryByPageNO(1,${totalPage})">首页</button> 
				  <button class="layui-btn" onclick = "queryByPageNO(${pageNo-1},${totalPage})">上一页</button> 
				  <span class = "layui-font-16">${pageNo} / ${totalPage}页</span>
				  <button class="layui-btn" onclick = "queryByPageNO(${pageNo+1},${totalPage})">下一页</button> 
				  <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="queryByPageNO(${totalPage},${totalPage})">尾页</button> 
				</div>
		</div>
</body>
<script>
	function downloadExcel(){
		//获取所有被选中的行
		window.location.href="s?m=download";
	}

	function queryByPageNO(pageNo,totalPage){
		if(pageNo <= totalPage){
			//查询条件
			var params = $("form").serialize();
			if(pageNo < 1) pageNo = 1;
			window.location.href = "s?"+params+"&pageNo="+pageNo;
		}
	}
	layui.use('layer', function(){
	  var layer = layui.layer;
	});
	function update(id){
		layer.open({
			type: 2,
			area: ['800px', '550px'],
			title: "更新信息页面",
			content: 's?m=updateStudentPage&id='+id,
			yes: function(index, layero) {
			layer.close(index);
		    },
	    })
	}
	function add(){
		layer.open({
			type: 2,
			area: ['800px', '550px'],
			title: "添加信息页面",
			content: 's?m=addStudentPage',
			yes: function(index, layero) {
			layer.close(index);
		    },
	    })
	}
	layui.use(['layer','form'], function(){
		var layer = layui.layer;
		var form = layui.form;
		
		//二级联动：查询学院对应的专业列表
		//select标签绑定触发事件
		form.on('select(f1)', function(data){
			console.info(data.elem); //得到select原始DOM对象
			console.info(data.value); //得到被选中的值
			var params = "m=listOfCollegeId&cId="+data.value;
			$.ajax({
				url: "ma",
				data: params,
				type: "POST",
				success: function(obj){
					//将json字符串转为数组 
					var arr = JSON.parse(obj);
					//清空子元素
					$("#major").empty();
					//添加子元素
					$.each(arr,function(index, item){
						console.info(item);
						//在元素内部末尾插入子元素
						$("#major").append("<option value='"+item.id+"'>"+item.name+"</option>");
					});
					//重新渲染select下拉框
					form.render('select');
				}	
			});
		});  
	});
</script>
</html>